<template>
    <div class="page2-6">
        <div class="left">
         <div class="left2 bg3">
                <div class="left2-title title-bg">
                  <span>基础信息</span>
                </div>
              <div class="left2-item-list f-r j-b f-w">
                <div class="left2-item bg2 f-r a-c" v-for="(item,index) in left2List" :key="index">
                  <div class="left2-item-label">
                    <div class="left2-item-name">
                      {{ item.name }}
                    </div>
                    <div class="left2-item-value f-r a-c">
                      <div class="left2-item-count">
                        {{ item.value }}
                      </div>
                      <div class="left2-item-unit">
                        {{ item.unit }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <div class="left2 bg3" style="margin: 12px 0">
            <div class="left2-title title-bg">
              <span>近48h热环境与空气质量</span>
            </div>
            <iframe color="#ADE3FF" scrolling="no" src="https://widget.tianqiapi.com/?style=tg&skin=durian&color=ADE3FF&&paddingtop=20" frameborder="0" paddingtop="100" width="620" height="98" allowtransparency="true"></iframe>
            <VChart style="width: 100%;height: 200px" :option="option2" autoresize ></VChart>
          </div>
          <div class="left2 bg3" style="min-height: 320px">
            <div class="left2-title title-bg">
              <span>未来48h舍外热环境</span>
            </div>
            <div class="chart-list">
              <div class="chart-item" v-for="(item,index) in chartList" :key="index">
                <VChart
                    style="width: 100%;height: 100%"
                    :option="getLineOption(item, 6)"
                    autoresize>
                </VChart>
              </div>
            </div>
            <div class="more" @click="openDialog1">
              查看更多
              <i class="el-icon el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="center-controll">
            <el-select v-model="roomId" @change="changeRoom">
              <el-option v-for="item in roomList" :key="item.room" :value="item.room" :label="item.room_text"></el-option>
            </el-select>
            <el-select v-model="deviceId" clearable placeholder="请选择设备">
              <el-option v-for="item in deviceList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </div>
<!--          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between">-->
<!--            <div class="online-box">-->
<!--              <div class="online-name" style="margin-right: 20px;font-weight: bold">设备状态：</div>-->
<!--              <div class="online">-->
<!--                100台-->
<!--              </div>-->
<!--              <div class="online offline">-->
<!--                50台-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="back-btn">-->
<!--              <el-select v-model="deviceId" clearable placeholder="请选择设备">-->
<!--                <el-option v-for="item in deviceList" :key="item.id" :value="item.id" :label="item.name"></el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--          </div>-->
          <div class="video-wrapper">
            <template v-if="deviceId">
              <div class="video-box">
                <div class="video-item video-item3" v-if="deviceList[0]">
                  <video :src="deviceList[0].url" controls autoplay></video>
                </div>
              </div>
              <div class="video-box">
                <div class="video-item video-item4" v-if="deviceList[1]">
                  <video :src="deviceList[1].url" controls autoplay></video>
                </div>
                <div class="video-item video-item4"  v-if="deviceList[2]">
                  <video :src="deviceList[2].url" controls autoplay></video>
                </div>
                <div class="video-item video-item4"  v-if="deviceList[3]">
                  <video :src="deviceList[3].url" controls autoplay></video>
                </div>
              </div>
            </template>
            <div class="video-box" v-else>
              <div class="video-item video-item2" v-for="item in deviceList" :key="item.name">
                <video :src="item.url" controls autoplay></video>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
            <div class="right1 bg3">
                <div class="right1-title title-bg">近48h生理、生产数据</div>
                <div class="chart-list">
                  <div class="chart-item" v-for="(item,index) in chartList2" :key="index">
                    <VChart
                        style="width: 100%;height: 100%"
                        :option="getLineOption(item, 6,30)"
                        autoresize>
                    </VChart>
                  </div>
                </div>
                <TextScroll :dataList="dataList"/>
                <div class="more" @click="openDialog2">
                  查看更多
                  <i class="el-icon el-icon-arrow-right"></i>
                </div>
            </div>
          <div class="right2 bg3">
            <div class="right2-title title-bg">近48h舍内气温阈值</div>
            <VChart
                style="width: 100%;height: 160px"
                :option="temOption"
                autoresize>
            </VChart>
          </div>
          <div class="right2 right3 bg3">
            <div class="right2-title title-bg">近48h舍内气温综合评价</div>
            <div class="chart-list">
              <div class="chart-item" style="width: 50%" v-for="(item,index) in chartList3" :key="index">
                <VChart
                    style="width: 100%;height: 100%"
                    :option="getLineOptionAndPoint(item, 6, 30)"
                    autoresize>
                </VChart>
              </div>
            </div>
            <div class="more" @click="openDialog3">
              查看更多
              <i class="el-icon el-icon-arrow-right"></i>
            </div>
          </div>
        </div>


      <el-dialog
          width="70%"
          top="5vh"
          title="舍外热环境"
          :visible.sync="dialogShow1"
          append-to-body
          modal-append-to-body>
        <div>
          <el-form>
            <el-form-item label="时间范围：">
              <el-date-picker size="mini" type="daterange" v-model="datePicker" @change="changeDialog1Date"></el-date-picker>
            </el-form-item>
          </el-form>
          <div class="chart-list">
            <el-row :gutter="12">
              <el-col :span="8" v-for="(item,index) in dialogChartList" :key="index">
                <div style="background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                  <VChart
                      style="width: 100%;height: 200px;"
                      :option="getLineOption(item, 8, 30)"
                      autoresize>
                  </VChart>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>
      <el-dialog
          width="70%"
          top="5vh"
          title="生理、生产数据"
          :visible.sync="dialogShow2"
          append-to-body
          modal-append-to-body>
        <div>
<!--          <el-form>-->
<!--            <el-form-item label="时间范围：">-->
<!--              <el-date-picker type="daterange" v-model="datePicker"></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
          <div class="chart-list">
            <el-row :gutter="12">
              <el-col :span="8" v-for="(item,index) in dialogChartList2" :key="index">
                <div style="background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                  <VChart
                      style="width: 100%;height: 200px;"
                      :option="getLineOption(item, 12, 40, 35)"
                      autoresize>
                  </VChart>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="table-list">
            <div class="thead">
              <div class="tr">
                <div class="td td1" style="width: 200px">日期</div>
                <div class="td td2">非健康肉兔笼位</div>
                <div class="td td3">原因</div>
              </div>
            </div>
            <div style="height: 250px;overflow:auto">
              <div v-for="item in dataList" :key="item.id" style="display: flex" class="tr" >
                <div class="td td1" style="width: 200px">
                  {{ item.date }}
                </div>
                <div class="td td2">
                  {{ item.room_text }}
                </div>
                <div class="td td3">
                  {{ item.monitor_value }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
          width="70%"
          top="5vh"
          title="舍内气温综合评价"
          :visible.sync="dialogShow3"
          append-to-body
          modal-append-to-body>
        <div>
          <el-form>
            <el-form-item label="时间范围：">
              <el-date-picker size="small" style="width: 460px" @change="changeDatePicker3" type="datetimerange" v-model="datePicker3"></el-date-picker>
            </el-form-item>
          </el-form>
          <div class="chart-list">
            <el-row :gutter="12">
              <el-col :span="12" v-for="(item,index) in dialogChartList3" :key="index">
                <div style="background-color: rgba(0,0,0,0.3);padding: 12px;margin-bottom: 12px">
                  <VChart
                      style="width: 100%;height: 240px;"
                      :option="getLineOptionAndPoint(item, 12)"
                      autoresize>
                  </VChart>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>

    </div>
</template>

<script>
import * as echarts from "echarts";
import TextScroll from "@/components/TextScroll.vue";
import axios from "axios";

const fontSize = 14
export default {
  name: "page2-6",
  components: {TextScroll},
    data() {
        return {
          // 农场信息
          farm_type: '',
          farmId: '',
          farm_name: '',
          // 当前畜牧舍信息
          roomList: [],
          roomDetail: {
            // 舍类型-品种-时期
          },
          roomId: '',
          deviceId: '',
          deviceList: [],
          datePicker: [
            '2023-08-01 00:00:00',
            '2023-08-06 00:00:05'
          ],
            option2: {},
            chartList: [
            ],
            dialogChartList: [],
            dataList:[

            ],
            chartList2: [
            ],
          dialogChartList2: [],
          dialogDataList: [],
            chartList3: [
            ],
          datePicker3: [
            '2023-08-10 00:00:00',
            '2023-08-11 00:00:05'
          ],
          dialogChartList3: [],
            temOption: {},
          dialogShow1: false,
          dialogShow2: false,
          dialogShow3: false,
        }
    },
    computed: {
      left2List() {
        return [
          {
            name: '舍类型',
            value: this.roomDetail.location,
            unit: ''
          },
          {
            name: '品种',
            value: this.roomDetail.breed,
            unit: ''
          },
          {
            name: '时期',
            value: this.roomDetail.period,
            unit: ''
          },
        ]
      }
    },
    created() {
    },
    mounted() {
      this.farm_type = this.$route.query.farm_type || this.farm_type
      this.farmId = this.$route.query.farm_id || this.farmId
      this.getFarmInfo()
      this.getRoomList()
    },
    methods: {
        getFarmInfo() {
          axios.get('/api/farm/' + this.farmId).then(res => {
            this.farm_name = res.data.data.farm_name
          })
        },
        async asyncRoom() {
          return await axios.get('/api/room/sync?farmId=' + this.farmId)
        },
        getRoomList() {
          axios.get('/api/room/list?farmId=' + this.farmId).then(res => {
            this.roomList = res.data.data
            if(this.roomList.length) {
              this.changeRoom(this.roomList[0].room)
            }
          })
        },
        changeRoom(room) {
          this.roomId = room
          this.roomDetail = this.roomList.find(item => item.room === room) || {}
          this.initData()
        },
        initData() {
          this.getWeather()
          /**
           * 室外数据
           * @type {string}
           */
          // 默认近48小时前，当前的前两天
          // startTime = dayjs().subtract(2, 'day').format('YYYY-MM-DD 00:00:00')
          // endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
          this.getRoomOutData(this.datePicker[0], this.datePicker[1], 'chart')
          /**
           * 生理数据
           */
          this.getGrowthData('chart')
          /**
           * 气温综合评价
           */
          this.getTemEvaluate('chart', this.datePicker3[0], this.datePicker3[1])

          /**
           * 气温阈值
           */
          this.getTemThreshold(this.datePicker[0], this.datePicker[1])
          /**
           * 获取设备
           */
          this.getDeviceList(this.datePicker[0], this.datePicker[1])
        },
      getWeather() {
        const option2Data = [
          {
            name: "温度",
            data: [36,35,36,35,36,35,36],
            color: "#00eff2",
          },
        ];
        const fontColor = "#55C1FF";
          this.option2 = {
            grid: {
              left: "0%",
              right: 15,
              top: 0,
              bottom:30,
              containLabel: true,
            },
            tooltip: {
              show: true,
              trigger: "axis",
              // 文字拼接温度单位
              formatter: function (params) {
                let res = params[0].name + "<br/>";
                for (let i = 0; i < params.length; i++) {
                  res += params[i].marker + params[i].seriesName + "：" + params[i].value + "℃<br/>";
                }
                return res;
              },
            },
            legend: {
              show: false,
              bottom: 0,
              data: option2Data.map((el) => {
                return {
                  name: el.name,
                  textStyle: {
                    color: el.color,
                  },
                };
              }),
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: true,
                axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
                  margin: 10,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#0093A7",
                  },
                },
                axisTick: {
                  show: true,
                  lineStyle: {
                    color: "#00FFFF",
                  },
                },
                splitLine: {
                  show: false,
                },
                data: [
                  "10/17",
                  "10/16",
                  "10/15",
                  "10/14",
                  "10/13",
                  "10/12",
                  "10/11",
                ],
              },
            ],
            yAxis: [
              {
                type: "value",
                name: '℃',
                axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#0093A7",
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(0, 147, 167, .18)",
                  },
                },
              },
            ],
            series: option2Data.map((el) => {
              return {
                name: el.name,
                type: "line",
                itemStyle: {
                  normal: {
                    color: el.color,
                  },
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(0, 255, 255, 0.3)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(0, 255, 255, 0)",
                      },
                    ]),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                    shadowBlur: 10,
                  },
                },
                label: {
                  show: true,
                  textStyle: {
                    color: '#00eff2'
                  },
                  position: 'top'
                },
                data: el.data,
              };
            }),
          }
      },
      getDeviceList(startTime,endTime) {
        axios.post(`/api/room/deviceInfo`, {
          farmId: this.farmId,
          roomId: this.roomId,
          startTime,
          endTime,
        }).then(res => {
            this.deviceList = res.data.data
            this.deviceId = ''
        })
      },
      getTemThreshold(startTime,endTime) {
        axios.post(`/api/room/temThreshold`, {
          farmId: this.farmId,
          roomId: this.roomId,
          startTime,
          endTime,
        }).then(res => {
          this.setTemOption(res.data.data.list)
        })
      },
      getTemEvaluate(type, startTime, endTime) {
        axios.post(`/api/room/temEvaluate`, {
          farmId: this.farmId,
          roomId: this.roomId,
          startTime,
          endTime,
        }).then(res => {
          if (type === 'chart') {
            this.chartList3 = res.data.data
          } else {
            this.dialogChartList3 = res.data.data
          }
        })
      },
      /**
       * 室外数据
       * @param startTime
       * @param endTime
       * @param type
       */
        getRoomOutData(startTime, endTime, type = 'chart') {
          let codeList = [
            {
              code: 101,
              name: '气温',
              unit: '',
              data: [

              ],
              min: 30,
              max: 33,
              itemStyle: {
                color: '#00F0FF'
              }
            },
            {
              code: 102,
              name: '湿度',
              unit: '',
              data: [
              ],

              min: 25,
              max: 35,
              itemStyle: {
                color: '#FE860E'
              }
            },
            {
              code: 104,
              name: '风速',
              unit: '',
              data: [
              ],

              min: 25,
              max: 35,
              itemStyle: {
                color: '#1ECAE7'
              }
            },
            {
              code: 103,
              name: '黑球温度',
              unit: '',
              data: [

              ],

              min: 25,
              max: 35,
              itemStyle: {
                color: '#FF5580'
              }
            },
            {
              code: 109,
              name: '光照',
              unit: '',
              data: [

              ],

              min: 25,
              max: 35,
              itemStyle: {
                color: '#3C7FF4'
              }
            },
            {
              code: 105,
              name: '二氧化碳',
              unit: '',
              data: [

              ],

              min: 25,
              max: 35,
              itemStyle: {
                color: '#FD82E2'
              }
            },
            {
              code: 106,
              name: '氨气',
              unit: '',
              data: [

              ],

              min: 25,
              max: 35,
              itemStyle: {
                color: '#D955FF'
              }
            },
          ]
          axios.post( `/api/room/data`, {
            farmId: this.farmId,
            roomId: this.roomId,
            startTime,
            endTime,
            code: codeList.map(item => item.code)
          }).then(res => {
            let dataList = codeList.map(item => {
              return {
                ...item,
                ...(res.data.data[item.code] || {})
              }
            }).filter(item => item.data.length)
            if (type === 'dialog') {
              this.dialogChartList = dataList
            } else {
              this.chartList = dataList
            }
          })
        },
        openDialog1() {
          this.dialogShow1 = true
          this.changeDialog1Date()
        },
        changeDialog1Date() {
          this.getRoomOutData(this.datePicker[0], this.datePicker[1], 'dialog')
        },
      /**
       * 生理数据
       */
      getGrowthData(type = 'chart') {
        if (type === 'chart') {
          this.chartList2 = []
          this.dataList = []
        } else {
          this.dialogChartList2 = []
          this.dialogDataList = []
        }
        // 区分体温、体重、采食量、料重比、非健康
        // 1.体温是近48小时的数据
        axios.post( `/api/room/data`, {
          farmId: this.farmId,
          roomId: this.roomId,
          startTime: '2023-08-05 00:00:00',
          endTime: '2023-08-07 00:00:05',
          code: [301]
        }).then(res => {
          console.log(res)
          let item = {
            code:  301,
            name: '体温',
            unit: '',
            itemStyle: {
              color: '#00F0FF'
            },
            ...res.data.data[301]
          }
          if (type === 'dialog') {
            this.dialogChartList2.push(item)
          } else {
            this.chartList2.push(item)
          }
        })
        // 2.体重、采食量，按只统计，两只为一笼，最终需要以笼为单位的平均值
        // 4. 料重比，是按笼统计取平均值
        axios.post(`/api/room/bodyWeight`, {
          farmId: this.farmId,
          roomId: this.roomId,
          startTime: '2023-08-01 00:00:00',
          endTime: '2023-08-08 00:00:05',
        }).then(res => {
          let chartList2 = [
            {
              code:  201,
              name: '采食量',
              unit: '',
              data: [

              ],
              min: 25,
              max: 35,
              itemStyle: {
                color: '#FE860E'
              }
            },
            {
              code:  202,
              name: '体重',
              unit: '',
              data: [

              ]
            },
            {
              code:  203,
              name: '料重比',
              unit: '',
              data: [

              ],
            },
          ]
          let chartList2Data = chartList2.map(item => {
            return {
              ...item,
              ...(res.data.data[item.code] || {})
            }
          })
          if (type === 'dialog') {
            this.dialogChartList2 = [
              ...this.dialogChartList2,
              ...chartList2Data
            ]
          } else {
            this.chartList2 = [
              ...this.chartList2,
              ...chartList2Data
            ]
          }
        })
        // 3. 非健康，是按笼统计取平均值
        axios.post(`/api/room/unhealthy`, {
          farmId: this.farmId,
          roomId: this.roomId,
          startTime: '2023-08-04 00:00:00',
          endTime: '2023-08-12 00:00:05',
        }).then(res => {
          let item =   {
            code: 204,
            name: '非健康',
            unit: '',
            data: [],
            itemStyle: {
              color: '#3C7FF4'
            },
            ...res.data.data,
            list: undefined
          }
          if (type === 'dialog') {
            this.dialogChartList2 = [
              ...this.dialogChartList2,
              item
            ]
            this.dialogDataList = res.data.data.list
          } else {
            this.chartList2 = [
              ...this.chartList2,
              item
            ]
            this.dataList = res.data.data.list
          }
        })
        /**
         * 那我就比如说计算第1周的第5003笼的料重比也就是8/1-8/8
         * 那就是：
         * 5003笼的周采食量就是：8/1-8/7 的5003笼的采食量在这7天的和
         * 5003笼周增重就是：8/8的5003笼体重-8/1的5003笼体重
         * 每笼的周料重比=每笼周采食量/每笼周增重就是
         */
      },
      openDialog2() {
          this.dialogShow2 = true
          this.getGrowthData('dialog')
        },
        openDialog3() {
          this.dialogShow3 = true
          this.getTemEvaluate('dialog', this.datePicker3[0], this.datePicker3[1])
        },
      changeDatePicker3() {
        setTimeout(() => {

          this.getTemEvaluate('dialog', this.datePicker3[0], this.datePicker3[1])
        })
      },
          setTemOption(list, up = 0, down = 0) {
            this.temOption = {
              tooltip: {
                show: true,
                trigger: 'axis',
              },
              xAxis: {
                data: list.map(el => {
                  return el.name
                }),
                type : 'category',
                boundaryGap : true,
                axisLabel: {
                  color:'rgba(255, 255, 255, 1)',
                  fontSize: 10
                },
                axisLine:{
                  show:true,
                  lineStyle:{
                    color:'rgba(255, 255, 255, .1)'
                  }
                },
                axisTick:{
                  show:false,
                },
                splitLine:{
                  show:false,
                  lineStyle:{
                    color:'rgba(255, 255, 255, 1)'
                  }
                },
              },
              yAxis: [
                {
                  name: '℃',
                  interval: 20,
                  startValue: 20,
                  nameTextStyle: {
                    color: '#fff'
                  },
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                      color: '#fff',
                      fontSize: 10
                    }
                  },
                  axisLine:{
                    show:true,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                  splitLine:{
                    show:false,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                },
              ],
              grid: {
                left: '2%',
                right: '2%',
                top:35,
                bottom: '5%',
                containLabel: true
              },
              series: [
                {
                  name: '温度',
                  type: 'line',
                  smooth: true,
                  data: list.map(el => el.value),
                  label: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: 10
                    },
                  },
                  lineStyle: {
                    width: 1,
                  },
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#00F0FF',
                    }, {
                      offset: 1,
                      color: '#3CE5F4',
                    }]),
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(0, 240, 255, 0.3)',
                    }, {
                      offset: 1,
                      color: 'rgba(60, 229, 244, 0.3)',
                    }]),
                  },
                  markLine: {
                    lineStyle: {
                      type: 'dashed',
                      // color: '#dc0830'
                    },
                    data: [
                       {
                          symbol: 'none',
                          label: {
                            position: 'middle',
                            formatter: '上限：' + up,
                            // 红色
                            color: '#dc0830',
                            textStyle: {
                              align: 'left',
                            }
                          },
                          lineStyle: {
                            width: 2,
                            color: '#dc0830'
                          },
                          yAxis: up,
                          name: '上限'
                      },
                      {
                        symbol: 'none',
                        label: {
                          position: 'middle',
                          formatter: '下限：' + down,
                          // 红色
                          color: '#2074FA',
                          textStyle: {
                            align: 'left',
                          }
                        },
                        lineStyle: {
                          width: 2,
                          color: '#2074FA'
                        },
                        yAxis: down,
                        name: '下限'
                      },
                    ]
                  },
                },
              ]
            };
          },
          getLineOption(item, fontSize = 8, nameGap = 20, left = 25 ) {
            return {
              tooltip: {
                show: true,
                trigger: 'axis',
                // 文字拼接温度单位
                formatter: function (params) {
                  let res = params[0].name + "<br/>";
                  for (let i = 0; i < params.length; i++) {
                    res += params[i].marker + params[i].seriesName + "：" + params[i].value + item.unit + "<br/>";
                  }
                  return res;
                },
              },
              xAxis: {
                data: item.data.map(el => {
                  // 格式化只需要小时
                  return el.name
                }),
                type: 'category',
                boundaryGap : true,
                axisLabel: {
                  fontSize: fontSize,
                  color:'rgba(255, 255, 255, 1)',
                  // margin: 8,
                  // 旋转角度
                  // rotate: 30,
                  // 不需要现实全部
                },
                axisLine:{
                  show:true,
                  lineStyle:{
                    color:'rgba(255, 255, 255, .1)'
                  }
                },
                axisTick:{
                  show:false,
                },
                splitLine:{
                  show:false,
                  lineStyle:{
                    color:'rgba(255, 255, 255, 1)'
                  }
                },
              },
              yAxis: [
                {
                  name: item.name,
                  nameTextStyle: {
                    color: '#fff',
                    fontSize
                  },
                  nameGap,
                  nameLocation: 'middle',
                  // interval: 5,
                  // startValue: item.min,
                  min: item.min,
                  max: item.max,
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                      color: '#fff',
                      fontSize: fontSize,
                    }
                  },
                  splitLine:{
                    show:false,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                  axisLine:{
                    show:true,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                },
              ],
              grid: {
                left,
                right: 5,
                top: 15,
                bottom: 10,
                containLabel: true
              },
              series: [
                {
                  name: item.name,
                  type: 'line',
                  smooth: true,
                  symbol: 'none',
                  data: item.data,
                  label: {
                    show: true,
                    textStyle: {
                      color: '#fff'
                    },
                  },
                  lineStyle: {
                    width: 1
                  },
                  itemStyle: item.itemStyle
                },
              ]
            };
          },
          getLineOptionAndPoint(item, fontSize = 8, nameGap = 0, left = 10 ) {
            console.log('nameGap', nameGap)
            return {
              grid: {
                left,
                right: 15,
                top: 15,
                bottom: 10,
                containLabel: true
              },
              tooltip: {
                show: true,
                trigger: 'axis',
              },
              xAxis: {
                data: item.data.map(el => {
                  // 格式化只需要小时
                  return el.name
                }),
                type: 'category',
                boundaryGap : true,
                axisLabel: {
                  fontSize: fontSize,
                  color:'rgba(255, 255, 255, 1)',
                  // margin: 8,
                  // 旋转角度
                  // rotate: 30,
                  // 不需要现实全部
                },
                axisLine:{
                  show:true,
                  lineStyle:{
                    color:'rgba(255, 255, 255, .1)'
                  }
                },
                axisTick:{
                  show:false,
                },
                splitLine:{
                  show:false,
                  lineStyle:{
                    color:'rgba(255, 255, 255, 1)'
                  }
                },
              },
              yAxis: [
                {
                  nameTextStyle: {
                    color: '#fff',
                    fontSize
                  },
                  nameLocation: 'middle',
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                      color: '#fff',
                      fontSize: fontSize,
                    }
                  },
                  splitLine:{
                    show:false,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                  axisLine:{
                    show:true,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                },
                {
                  name: item.name,
                  nameTextStyle: {
                    color: '#fff',
                    fontSize
                  },
                  nameLocation: 'middle',
                  interval: 5,
                  // startValue: item.min,
                  min: item.min,
                  max: item.max,
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                      color: '#fff',
                      fontSize: fontSize,
                    }
                  },
                  splitLine:{
                    show:false,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                  axisLine:{
                    show:true,
                    lineStyle:{
                      color:'rgba(255, 255, 255, .1)'
                    }
                  },
                },
              ],
              series: [
                {
                  yAxisIndex: 1,
                  name: item.name,
                  type: 'line',
                  smooth: true,
                  symbol: 'none',
                  data: item.data,
                  label: {
                    show: true,
                    textStyle: {
                      color: '#fff'
                    },
                  },
                  lineStyle: {
                    width: 1
                  },
                  itemStyle: item.itemStyle
                },
                {
                  yAxisIndex: 0,
                  // symbol: 'rect',
                  symbolSize: 2,
                  data: item.scatter,
                  type: 'scatter'
                }
              ]
            };
          },
    }
}
</script>

<style lang="less">
.el-dialog {
  display: block;
  box-sizing: border-box;
  overflow: auto;
  background: rgba(6,90,143, 1);
  border: 2px solid rgba(42, 216, 253, .47);
  border-radius: 10px;
  .el-dialog__headerbtn {
    top: 10px;
  }
  .el-dialog__close {
    font-size: 28px;
  }
  .el-dialog__headerbtn .el-dialog__close,
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    padding: 20px;
    color: #ffffff;

    .el-form-item__label {
      color: #ffffff;
      cursor: pointer;
      font-size: 22px;

      background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .el-range-input {
      font-size: 18px;
    }
  }

  .chart-list {
    display: flex;
    flex-wrap: wrap;
  }
  .thead {
    background-color: rgba(0, 147, 167, 0.4);
  }

  .tr {
    display: flex;
    align-items: center;
    .td {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      padding: 0 12px;
      width: 120px;
      color: #ffffff;
    }
    .td1 {
      text-align: left;
    }
    .td2 {
      width: 70%;
      text-align: center;
    }
    .td3 {
      text-align: left;
    }
  }
  .tr:nth-child(2n) {
    background-color: rgba(0, 147, 167, 0.2);
  }
}

.page2-6 {
    padding: 20px 38px;
    padding-top: 0;
    display: flex;
    justify-content: space-between;
  .el-input__inner {

    background: rgba(6, 90, 143, 0.85);
    border-color:  rgba(42, 216, 253, 0.47);
    color: #ffffff;
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background: rgba(6, 90, 143, 0.85);
    border-color:  rgba(42, 216, 253, 0.47);
    color: #ffffff;
    box-shadow:-1px 0 0 0 transparent;
  }
  .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner  {
    border-color: rgba(42, 216, 253, 0.47);
  }
  .left2-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .right1,
  .left2 {
    position: relative;
    display: flex;
    flex-direction: column;
    .chart-list {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .more {
    position: absolute;
    right: 16px;
    bottom: 6px;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .center {
    padding: 0 20px;
    .center-controll {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;
    }
    .online-box {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 18px;
      margin: 24px 0;
      .online-name {
        color: #ffffff;
        cursor: pointer;
        background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .online {
        color: #ffffff;
        position: relative;
        padding-left: 30px;
        height: 32px;
        line-height: 32px;
        margin-right: 20px;
        &::after {
          display: inline-block;
          content: ' ';
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #00eff2;
          position: absolute;
          left: 0;
          top: 55%;
          transform: translateY(-50%);
        }
      }
      .offline::after {
        background-color: #ff0000;
      }
    }
    .back-btn {
      flex-shrink: 0;
      color: #fff;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .video-wrapper {
      background-color: rgba(0, 147, 167, 0.2);
      padding: 16px;
      padding-bottom: 0;
      width: 100%;
      .video-item3 {
        width: 100%;
        height: 480px;
      }
      .video-item4 {
        width: calc(33% - 10px);
        height: 200px;
      }
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: fill
    }
    .video-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-right: -10px;
    }
    .video-item {
      width: calc(50% - 10px);
      margin-right: 10px;
      margin-bottom: 20px;
      height: 400px;
      background-color: rgba(6, 90, 143, 0.15);
    }
    .video-item2 {
      height: 280px;
    }
  }
  .chart-list {
    display: flex;
    flex-wrap: wrap;
    .chart-item {
      width: 33%;
      height: 100px;
    }
  }
    .title-bg {
        font-size: 18px;
        height: 35px;
        color: #ADE3FF;
        padding-left: 21px;
        line-height: 35px;
        background-image: url("~@/assets/iocn/5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .bg2 {
        background-image: url("~@/assets/iocn/4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .bg3 {
        background: rgba(6,90,143,0.15);
        border: 2px solid rgba(42, 216, 253, .47);
        border-radius: 10px;
    }
    .left {
        flex-shrink: 0;
        .left1 {
            width: 492px;
            height: 110px;
            .left1-item {
                background-image: url("~@/assets/icon2/1.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                padding-left: 16px;
                color: #ffffff;
                width: 220px;
                height: 66px;
                .left1-item-left {
                    height: 50px;
                    .left1-item-value {
                        vertical-align: sub;
                        .left1-item-count {
                            font-size: 24px;
                            line-height: 20px;
                            color: #FED855;
                        }
                        .left1-item-unit {
                            font-size: 12px;
                            line-height: 24px;
                            color: #fff;
                            margin-left: 10px;
                        }
                    }
                }
                img {
                    width: 50px;
                    height: 50px;
                }
            }
        }
        .left2 {
            width: 492px;
            padding: 20px 20px 0 20px;
            .left2-item-list {
                padding-right: 10px;
            }
            .left2-item {
                width: 215px;
                height: 100px;
                padding-left: 105px;
                color: #fff;
                .left2-item-label {
                    margin-top: 10px;
                }
                img {
                    width: 72px;
                    height: 55px;
                    margin-right: 12px;
                }
                .left2-item-name {
                    font-size: 14px;
                    line-height: 15px;
                    font-weight: bold;
                    color: #FFFFFF;
                }
                .left2-item-value {
                    vertical-align: super;
                    .left2-item-count {
                      font-size: 14px;
                      font-weight: 400;
                        color: #FFFFFF;
                        background: linear-gradient(0deg, #73DAFC 0%, #2DCBFF 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                    .left2-item-unit {
                        font-size: 14px;
                        color: #46D0FE;
                        margin-left: 5px;
                    }
                }
            }
        }
    }
    .center {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .center1 {
            width: 847px;
            height: 379px;
            margin-bottom: 24px;
            padding: 30px;
            padding-bottom: 0;
            .center1-1,
            .center1-2{
                flex: 1;
                height: 100%;
            }
        }
        .center2 {
            width: 847px;
            height: 438px;
        }
    }
    .right {
        flex-shrink: 0;
        .right1 {
            width: 471px;
            height: 412px;
            margin-bottom: 14px;
            padding: 20px 10px;
        }
        .right2 {
            width: 471px;
            height: 220px;
            margin-bottom: 12px;
            padding: 20px 10px;
        }
        .right3 {
          position: relative;
            width: 471px;
            height: 270px;
            padding: 20px 10px;
          padding-bottom: 0;

        }
    }

}
</style>
